import React, { useEffect, useState } from 'react';
import {
  Alert,
  Badge,
  Button,
  Divider,
  Flex,
  FloatButton,
  GetProps,
  List,
  Modal,
  Skeleton,
  Tooltip,
  Upload,
} from 'antd';
import { DraggableModal } from '@/components/DraggableModal';
import { ClearOutlined, CloudUploadOutlined } from '@ant-design/icons';
import InfiniteScroll from 'react-infinite-scroll-component';

declare type ModelType = GetProps<typeof Modal>
declare type UploadType = GetProps<typeof Upload>
declare type AlertType = GetProps<typeof Alert>;

declare type DataSourceType = {
  type?: AlertType['type'];
  message?: AlertType['message'];
}

interface SuperImportProps extends ModelType {
  tip?: string;
}

const SuperImport: React.FC<SuperImportProps> = (props) => {
  const { title = '数据导入', width = window.innerWidth * 0.618, height = 256 } = props;

  const [ dataSource, setDataSource ] = useState<DataSourceType[]>([]);
  const [ loading, setLoading ] = useState<boolean>(false);

  const uploadProps: UploadType = {
    name: 'file',
    multiple: false,
    onChange: () => {

    },
    onDrop: () => {

    },
  };

  const loadMore = () => {
    console.log('调用滚动加载数据......>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
    if (loading) {
      return;
    }
    setLoading(true);
    fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat,picture&noinfo')
      .then((res) => res.json())
      .then((body) => {
        setDataSource([ ... dataSource, ... body.results ]);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  useEffect(() => {
    loadMore();
  }, []);

  return <DraggableModal
    maskClosable={ false } width={ width }
    { ... props }
    title={ title } footer={ false }
  >
    <Flex vertical>
      <Upload.Dragger { ... uploadProps }>
        <Flex vertical align="center">
                    <span
                      style={ { marginBottom: 16 } }
                    >
                        <CloudUploadOutlined style={ { fontSize: 48, color: '#1677ff' } } />
                    </span>
          <span>将文件拖到此处，或<Button type="link" size="small">点击上传</Button></span>
        </Flex>
      </Upload.Dragger>
      <Flex justify="center">
        <span>仅支持xls、xlsx文件格式，大小不能超过5MB<Button type="link" size="small">下载模板</Button></span>
      </Flex>
      <Badge.Ribbon text="控制台日志" color="default" placement="start">
        <div
          id="console"
          style={
            {
              marginTop: 16,
              border: '1px solid rgba(140, 140, 140, 0.35)',
            }
          }
        >
          <Tooltip title="清理控制台日志">
            <FloatButton
              type="primary" icon={ <ClearOutlined /> }
              style={ { right: 36, bottom: 40 } }
            />
          </Tooltip>
          <InfiniteScroll
            dataLength={ dataSource.length }
            next={ loadMore }
            hasMore={ dataSource.length < 50 }
            loader={ <Skeleton avatar paragraph={ { rows: 1 } } active /> }
            endMessage={ <Divider plain>It is all, nothing more 🤐</Divider> }
            // scrollableTarget="console"
            height={ height }
          >
            <List
              dataSource={ dataSource } size="small"
              renderItem={ (item, index) => (
                <List.Item>
                  <Flex
                    gap="small" justify="space-between" style={ { width: '100%' } } align="center"
                  >
                    <Flex flex={ 1 }>
                      <Alert
                        type={ item?.type } message={ item?.message || 'empty' } showIcon
                        style={
                          {
                            width: '100%',
                            padding: 0,
                            border: 0,
                            backgroundColor: 'transparent',
                          }
                        }
                      />
                    </Flex>
                    <Flex><Button type="link" size="small">拷贝</Button></Flex>
                  </Flex>
                </List.Item>
              ) }
            />
          </InfiniteScroll>
        </div>
      </Badge.Ribbon>
    </Flex>
  </DraggableModal>;
};

export {
  SuperImportProps,
  SuperImport,
};